<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html,
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;
        }
        
        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }
        
        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }
        
        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }
        
        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }
        
        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }
        
        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }
    </style>
</head>

<body>

    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">吐槽:</p>
                <input type="text" class="text" id="text" />
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>
</body>

<script src="../js/jquery-3.1.0.js"></script>

<script>
    let leftWidth = $(":root").width();
    $("#btn").click(function() {
        let randomHeight = Math.floor(Math.random() * 400);
        let colorArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
        let str = "#";

        for (let i = 0; i < 6; i++) {
            let num = Math.floor(Math.random() * colorArr.length);
            str += colorArr[num]
        }

        let val = $("#text").val();
        $(`<span>${val}</span>`).appendTo($("#boxDom")).css({
            left: leftWidth,
            color: str,
            top: randomHeight
        }).animate({
            left: -400,
        }, 5000, "linear", function() {
            $(this).remove()
        })
        $("#text").val("");
    })
</script>



























<!-- <script>
    var leftWidth = $(":root").width()
    $("#btn").click(function() {
        var str = "#";
        var colorArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
        for (var i = 0; i < 6; i++) {
            let num = Math.floor(Math.random() * colorArr.length);
            str += colorArr[num];
        }

        let randomHeight = Math.floor(Math.random() * 400);
        $("<span></span>").text($("#text").val())
            .css({
                color: str,
                left: leftWidth,
                top: randomHeight
            }).appendTo($("#boxDom")).animate({
                left: -500
            }, 10000, "linear", function() {
                $(this).remove()
            })
        $("#text").val("")
    })
</script> -->

</html>